<template>
  <div class="project-header">
    <div class="project-header-left">
      <div class="project-header-info">
        <img
          src="https://image.xuexiwangzhe.com/FkDuy6fH86heIY__jyjV-X5jfMAg"
          class="project-header-info-back-img"
        />
        <img
          src="https://image.xuexiwangzhe.com/FiBF-GsFNMDGJeX1MdtwSx7GsOPN"
          class="project-header-info-logo-img"
        />
        <div class="project-header-info-name">绩效管理训练营牛AB1</div>
        <div class="project-header-info-auth">
          <img
            src="https://image.xuexiwangzhe.com/Fu4eYYyvEATd9QHfOQL8vRWGaaOY"
            class="project-header-info-auth-img"
          />
          <div>私密</div>
        </div>
        <img
          src="https://image.xuexiwangzhe.com/Fjb0mGFOe3OJUCBa00RIIsj9Ln7k"
          class="project-header-info-color-img"
        />
      </div>
      <div class="project-header-nav">
        <div class="project-header-nav-item project-header-nav-item-actived">
          简介
        </div>
        <div class="project-header-nav-item">主题</div>
        <div class="project-header-nav-item">成员</div>
        <div class="project-header-nav-border"></div>
        <div class="project-header-nav-item">讨论</div>
        <div class="project-header-nav-item">PK</div>
        <div class="project-header-nav-item">数据</div>
      </div>
    </div>
    <div class="project-header-right">
      <img
        src="https://image.xuexiwangzhe.com/FsjBfnKITrUVnEG2Eig-XTXwD61M"
        class="project-header-notice-img"
      />
      <img
        src="https://image.xuexiwangzhe.com/FuWSoSon7rIjKrQwPT81OUjJEEBw"
        class="project-header-share-img"
      />
      <mu-button class="project-header-publish-btn">发布</mu-button>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
.project-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  background: #ffffff;
  box-shadow: 0px 2px 3px 0px rgba(102, 102, 102, 0.2);
  padding: 0 44px;
}

.project-header-left,
.project-header-right {
  display: flex;
  align-items: center;
}

.project-header-info {
  display: flex;
  align-items: center;
  margin-right: 169px;
}

.project-header-info-back-img {
  width: 12px;
}

.project-header-info-logo-img {
  width: 24px;
  margin-right: 15px;
}

.project-header-info-name {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-right: 27px;
}

.project-header-info-auth {
  display: flex;
  align-items: center;
  color: #808080;
  margin-right: 21px;
}

.project-header-info-auth-img {
  width: 15px;
  margin-right: 6px;
}

.project-header-info-color-img {
  width: 15px;
}

.project-header-nav {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.project-header-nav-item {
  position: relative;
  height: 74px;
  line-height: 74px;
  margin-right: 33px;

  &:last-child {
    margin-right: 0;
  }
}

.project-header-nav-item-actived::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #265cff;
  border-radius: 2px;
}

.project-header-nav-border {
  width: 1px;
  height: 21px;
  background-color: #333333;
  margin-right: 33px;
}

.project-header-notice-img {
  width: 21px;
  margin-right: 27px;
}

.project-header-share-img {
  width: 21px;
  margin-right: 33px;
}

.project-header-publish-btn {
  width: 60px !important;
  height: 27px !important;
  line-height: 27px !important;
  background: #265cff !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: #fff !important;
  min-width: auto !important;
}
</style>
